<template>
	<view class="materdetailBottom">
		<!-- 分类品牌材料列表 -->
		<view class="project_list">
			<view class="project_box">
				<view class="list_top">
					<view class="list_left">
						<text>{{materiaLdetailList.materialName}}</text>
					</view>
					<view class="list_right">
						<button @click="appShare(materiaLdetailList)" size="mini" type="default" open-type="share"
							class="button-share">
							<image src="http://106.14.56.171:15016/images/shareSolid.png" mode="widthFix">
						</button>
					</view>
				</view>
				<view class="list_base">
					<view class="base_left" @click="viewPhotos(materiaLdetailList.coverUrl)">
						<fileImage :src="materiaLdetailList.coverUrl_T" :className="['cidental']" />
					</view>
					<view class="base_right">
						<!-- 名称 -->
						<view class="threeName">
							<text>{{materiaLdetailList.materialBrand||'暂无数据'}}</text>
						</view>
						<!-- 单位 -->
						<view class="threeName">
							<text>{{materiaLdetailList.materialSpec||'暂无数据'}}</text>
						</view>
						<!-- 类型 -->
						<view class="threeName">
							<text>{{materiaLdetailList.materialType||'暂无数据'}}</text>
						</view>
						<view>
							<!-- 供应商联系方式 -->
							<!-- 暂无接口 -->
							<text class="base_right_text">供应商：</text>
							<text style="color: #000000;">上海易乓乒智能科技股份有限公司</text>
						</view>
						<view>
							<!-- 供应商名称 -->
							<!-- 暂无接口 -->
							<text class="base_right_text">联系方式：</text>
							<text style="color: #000000;" @click="callPhone">倪女士 021-56605254</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 五个商标 -->
		<view class="trademark">
			<block v-for="(item,index) in jumPapgeList" :key="index">
				<view class="" @click="clickLink(item.link)">
					<image :src='item.img'></image>
					<text>{{item.title}}</text>
				</view>
			</block>
		</view>
		<!-- 简介 -->
		<view class="synopsis">
			<view class="textOne">
				<view class="icons"></view>
				<text>简介</text>
			</view>
			<view>
				<text>{{materiaLdetailList.materialDesc||'暂无数据'}}</text>
			</view>
		</view>
		<!-- 相关附件 -->
		<view class="correlationAnnex">
			<view class="textCorrl">
				<view class="icons"></view>
				<text>相关附件</text>
			</view>
			<view class="annex" v-if="materiaLdetailList.files && materiaLdetailList.files.length">
				<view class="annexOne" v-for="item in materiaLdetailList.files" @click="getAnnex(item)">
					<image src="http://106.14.56.171:15016/images/materialDetail/pdf.png" mode="scaleToFill">
					</image>

					<view class="annexSmall">
						<text>{{item.showName}}</text>
						<text>{{item.createTime && item.createTime.split('T')[0]}}</text>
					</view>
				</view>
			</view>
			<view class="annex noneData" v-else>
				<image src="http://106.14.56.171:15016/images/images(4)(1)/images/noMessige.png" mode=""></image>
				<text>暂无数据...</text>
			</view>
		</view>
		<!-- 相关案例 -->
		<view class="correlationCase">
			<view class="textCorrl" style="padding:0 0 20rpx 0;">
				<view class="icons"></view>
				<text class="anli">相关案例</text>
			</view>
			<view class="case" v-if="relatedCasesList && relatedCasesList.length">
				<view class="caseOne" v-for="item in relatedCasesList" @click="projextDetail(item)">
					<fileImage :src="item.coverPicUrl" :className="['casePhotos']" />

					<view class="annexBig">
						<!-- 标题 -->
						<text class="biaoti">{{item.prjName}}</text>
						<view class="">
							<text class="ownerSide">业主方</text><text class="Servants">{{item.serviceOwner}}</text>
						</view>
						<view class="">
							<text class="ownerSide">服务方</text>
							<text class="Servants">{{item.serviceSellerName}}</text>
						</view>
						<view class="">
							<text class="ownerSide">完工时间</text>
							<text class="Servants">{{item.actFinishTime && item.actFinishTime.split('T')[0]}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="case noneData" v-else style="margin: 0 0 20rpx 0;">
				<image src="http://106.14.56.171:15016/images/images(4)(1)/images/noMessige.png" mode=""></image>
				<text>暂无数据...</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		CurrentRouter,
		uniShareMethod
	} from '@/config/CurrentRouter.js'
	import {
		baseMethod
	} from '@/config/method.js'
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	export default {
		components: {
			fileImage
		},
		data() {
			return {
				materialDetailId: '', //ID
				materiaLdetailList: {}, //材料详情里面的PDF和名称
				relatedCasesList: [], //材料详情里面的相关案例
				relatedCasesData: {
					pageNo: 1,
					pageSize: 10,
				},
				choseLink: '',
				isHasNextPages: false,
				limitLoad: false, // 防止重复加载
				jumPapgeList: [{
						title: '工品优选',
						img: 'http://106.14.56.171:15016/images/materialDetail/product.png',
						link: 'https://www.vipmro.com'
					},
					{
						title: '欧贝商城',
						img: 'http://106.14.56.171:15016/images/materialDetail/Obe.png',
						link: 'https://www.obei.com.cn'
					},
					{
						title: '震坤行',
						img: 'http://106.14.56.171:15016/images/materialDetail/Kunline.png',
						link: 'https://www.zkh.com'
					},
					{
						title: '西域',
						img: 'http://106.14.56.171:15016/images/materialDetail/western.png',
						link: 'https://www.ehsy.com'
					},
					{
						title: '爱采购',
						img: 'http://106.14.56.171:15016/images/materialDetail/pick.png',
						link: 'https://b2b.baidu.com'
					},


				] //循环链接跳转
			}
		},
		onLoad: function(options) {
			// console.log(options);
			this.materialDetailId = options.id; // 接收工业材料页面里面的ID
			this.materiaLdetails(); // 材料详情
			this.relatedCases(); // 相关案例
		},
		// 微信分享个人
		onShareAppMessage(options) {
			// console.log('---------陈',options);
			const {
				coverUrl,
				materialName
			} = this.materiaLdetailList
			// console.log(coverUrl, '9999999999999999999999')
			return {
				title: materialName,
				path: `/pages/material/materialdetail?id=${this.materialDetailId}`,
				imageUrl: coverUrl
			}
		},
		// 微信分享到朋友圈
		onShareTimeline(options) {
			const {
				coverUrl,
				materialName
			} = this.materiaLdetailList
			// console.log(coverUrl, '9999999999999999999999')
			return {
				title: materialName,
				query: `/pages/material/materialdetail?id=${this.materialDetailId}`,
				imageUrl: coverUrl,

			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// this.ifBottomRefresh = true;
			this.init()
			this.relatedCases(); //下拉刷新项目案例
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 触底加载
		onReachBottom() {
			if (this.isHasNextPages == true) {
				this.relatedCasesData.pageNo += 1;
				this.relatedCases(); //触底加载材料列表
			}
		},
		methods: {
			// #ifdef APP-PLUS || H5
			appShare(materiaLdetailList) {
				console.log(materiaLdetailList);
				uniShareMethod({
					path: `pages/material/materialdetail?id=${this.materialDetailId}`,
					share: {
						imageUrl: materiaLdetailList.coverUrl_T,
						title: materiaLdetailList.materialName,
					}
				}).then(res => {}).catch(err => {})
			},
			// #endif
			//#ifdef APP-PLUS
			clickLink(link) {
				// console.log('在小程序中出现代码', link);
				var urlStr = encodeURI(link) //把字符串作为url进行编码
				plus.runtime.openURL(urlStr);
			},
			// #endif
			// 在小程序中出现代码
			//#ifdef MP-WEIXIN || H5 
			clickLink(link) {
				// console.log('在小程序中出现代码', link);
				uni.showToast({
					title: '请到App查看',
					icon: 'none',
					duration: 2000
				});

			},
			// #endif
			// 材料详情
			materiaLdetails() {
				this.$http
					.get('api/Materials/GetmaterialInfo?materialId=' + this.materialDetailId)
					.then(res => {
						this.materiaLdetailList = res;
						// console.log('材料详情',this.materiaLdetailList);
					})
			},
			// 查看封面照片
			viewPhotos(coverUrl) {
				// 要加个判断,如果不加判断,也可以,但苹果手机点击空白的照片时,返回不了页面
				console.log('点击打开封面照片', coverUrl);
				if (!coverUrl) {
					uni.showToast({
						title: '暂无图片',
						icon: 'none'
					})
					return;
				}
				uni.previewImage({ // 预览图片  图片路径必须是一个数组
					current: 0,
					urls: [coverUrl],
				})
			},
			callPhone() {
				console.log('拨打电话');
				// uni.makePhoneCall({
				// 	phoneNumber: '17317223328' //仅为示例
				// });
			},
			// 点击打开附件
			// #ifdef H5
			getAnnex() {
				uni.showToast({
					title: '请到app或小程序查看，暂不支持此功能',
					icon: 'none'
				});

			},
			// #endif

			// #ifdef APP || MP-WEIXIN
			getAnnex(item) {
				let userCode = CurrentRouter({})
				if (userCode) return
				// console.log('打开附件');
				uni.showLoading({
					mask: true,
					icon: 'loading'
				})
				uni.downloadFile({
					url: item.filePath,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								uni.showToast({
									title: '成功打开附件',
									icon: 'none'
								});
								uni.hideLoading()
								// console.log('打开附件成功');
							},
							fail: function() {
								uni.hideLoading()
								uni.showToast({
									title: '文件打开失败',
									icon: 'error'
								})
							}
						});
					},
					fail: function() {
						uni.hideLoading()
						uni.showToast({
							title: '附件下载失败',
							icon: 'error'
						})
					}
				});

			},
			// #endif
			// 相关案例
			relatedCases: debounce(function() {
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					mask: true
				})
				let data = {
					...this.relatedCasesData,
					materialId: Number(this.materialDetailId)
				}
				// console.log(data);
				this.$http.post('api/Project/GetProjectByMaterialId', data).then(res => {
					// console.log('相关案例', res);
					this.limitLoad = false
					uni.hideLoading()
					this.relatedCasesList = [...this.relatedCasesList, ...res.items];
					this.isHasNextPages = res.hasNextPages
					console.log(this.relatedCasesList);
					// 脱密公司加星号 要先判断长度
					// this.relatedCasesList.forEach((el) => {
					// console.log('需要传给项目详情ID',el.prjInfoId);
					// 向下取整parseInt
					// let unit = parseInt(el.serviceOwner.length / 4);
					// el.serviceOwner = el.serviceOwner.substr(0, unit) + '****' + el.serviceOwner
					// 	.substr(unit * 3);
					// })
					// console.log(this.relatedCasesList);

				}).catch(err => {
					this.limitLoad = false
					uni.hideLoading()
				})

			}, 300),
			// 跳转到项目详情
			projextDetail(item) {
				uni.navigateTo({
					url: './../project/project_detail/project_detail?id=' + item.prjInfoId
				})
			},
			init() {
				this.relatedCasesList = []
				this.relatedCasesData.pageNo = 1
			}

		}
	}
</script>

<style lang="less" scoped>
	.materdetailBottom {
		padding-bottom: 40rpx;
	}

	.search-bar {
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		left: 100px;
		z-index: 999;
	}

	.progressl {
		width: 96%;
	}

	.button-share {
		background-color: #fff;
		line-height: normal;
		padding: 0;
		font-size: 30rpx;
	}

	.button-share::after {
		border: none;
	}

	// ____________________
	.project_list {
		margin-top: 20rpx;
		width: 100%;
		// background-color: red;
	}

	// 材料详情
	.project_box {
		width: 100%;
		background-color: rgba(255, 255, 255, 1);
		// background-color: aqua;
		display: flex;
		flex-direction: column;
	}

	.list_top {
		height: 40rpx;
		margin-top: 20rpx;
		// background-color: palegoldenrod;
		display: flex;
		flex-direction: row;
		justify-content: space-between
	}

	.list_left {
		/* background-color: palegreen; */
		padding-left: 4%;
	}

	.list_left image {
		float: left;
		margin-top: 5rpx;
		margin-right: 15rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.list_left text {
		box-shadow: none;
		font-family: '微软雅黑 Bold', '微软雅黑';
		font-weight: 700;
		font-style: normal;
		font-size: 30rpx;
	}

	.list_right {
		padding-right: 4%;
		// background-color: palegreen;

	}

	.list_right image {
		margin-left: 15rpx;
		width: 35rpx;
		height: 35rpx;
	}

	.list_right text {
		display: inline-block;
		// background-color: #ecf4f0;
		height: 40rpx;
		width: 120rpx;
		font-size: 24rpx;
		color: #3E9265;
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.list_base {
		margin-top: 18rpx;
		// background-color: brown;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.base_right {
		width: 68%;
		// background-color: aquamarine;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.base_right view {
		// background-color: #3E9265;
		margin-top: 8rpx;

	}

	.threeName {
		// background-color: aqua;
		width: 95%;
		table-layout: fixed;
		word-wrap: break-all;
		word-break: normal;
		overflow: hidden;

	}

	// 物料名称物料规格物料品牌 超出部分变成省略号
	.threeName>view {
		width: 26%;
		/*溢出隐藏,超出部分变成省略号*/
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: break-all;
		text-align: center;
	}

	.list_base .base_right .base_right_text {
		font-size: 26rpx;
		color: #616161;
		margin-right: 2%;
	}


	.list_base .base_right text {
		font-size: 26rpx;
		color: #333;
	}

	.list_left .textName {
		/* 不能加绝对定位,会影响到position: fixed; 使用,在真机调试当中,它的绝对定位层级最高 */
		/* position: absolute; */
		width: 452rpx !important;
		white-space: nowrap;
		/* 不允许换行
		overflow: hidden;
		/* 超出包裹器隐藏 */
		text-overflow: ellipsis;
		/* 显示省略符号来代表被修剪的文本 */
	}

	// 五个商标的取消\立即查看
	.toggleAmed {
		margin: auto;
		width: 500rpx;
		height: 300rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		text-align: center;
		line-height: 150rpx;

		>text {
			font-size: 30rpx;
		}

		.move {
			width: 100%;
			display: flex;
			justify-content: space-around;

			>view {
				width: 200rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				border-radius: 35rpx;
				background-color: #f5f5f5;
			}

			>view:nth-child(1) {
				border: 1px solid #f5f5f5;
			}

			>view:nth-child(2) {
				color: #B5001E;
			}
		}
	}


	// 五个商标
	.trademark {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		// background-color: aqua;	
		display: flex;
		justify-content: space-around;
	}


	.trademark>view {
		width: 20%;
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #6C6C6C;
	}

	.trademark>view:nth-child(4) {
		margin-left: -25rpx;
		width: 14%;
		display: flex;
		justify-content: space-between;
		// background-color: aqua;
	}

	.trademark>view>text {
		padding-left: 15rpx;
	}

	.trademark>view>image {
		margin-left: 10rpx;
		width: 35rpx;
		height: 35rpx;
	}

	.icons {
		width: 14rpx;
		height: 30rpx;
		background-color: #B5001E;
		margin-left: 20rpx;
	}

	// 简介
	.synopsis {
		width: 93%;
		background-color: #FFFFFF;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
	}

	.synopsis>view>image {
		width: 50rpx;
		height: 35rpx;
	}

	.synopsis>view:nth-child(1) {
		margin-top: 20rpx;
		width: 25%;
		height: 50rpx;
		// background-color: red;
		display: flex;
		align-items: center;
	}

	.synopsis>view:nth-child(2) {
		width: 85%;
		font-size: 23rpx;
		text-align: left;
		// background-color: aqua;
		margin: auto;
		padding: 10rpx 0 20rpx 0;

	}

	// 相关附件
	.correlationAnnex {
		width: 93%;
		background-color: #FFFFFF;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.correlationAnnex>view:nth-child(1) {
		margin-top: 20rpx;
		width: 35%;
		height: 50rpx;
		line-height: 55rpx;
		display: flex;
		align-items: center;

	}

	.textOne>text,
	.textCorrl>text {
		margin-left: 30rpx;
	}

	.correlationAnnex>view:nth-child(1)>image {
		width: 50rpx;
		height: 35rpx;
	}

	.correlationAnnex>view:nth-child(2) {
		width: 93%;
		margin: auto;
	}

	.annex {
		width: 100%;
		// background-color: aqua;
		padding: 20rpx 0 20rpx 0;
	}

	// 暂无数据
	.noneData {
		// D:\desktop\项目\ePumpingUniApp\static\images
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;

		>image {
			width: 60rpx;
			height: 60rpx;
		}

		>text {
			margin-top: 10rpx;
			font-size: 26rpx;
		}
	}

	.annex>view {
		width: 100%;
		// height: 110rpx;
	}

	.annexOne {
		display: flex;
		align-items: center;
		// background-color: #04be02;
	}

	.annexOne>image {
		width: 50rpx;
		height: 60rpx;
		margin-left: 20rpx;
	}


	.annexSmall {
		width: 100%;
		font-size: 26rpx;
		// background-color: red;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;

	}

	// 相关案例
	.correlationCase {
		width: 93%;
		background-color: #FFFFFF;
		// background-color: aqua;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		// padding-bottom: 40rpx;
	}

	.correlationCase>view:nth-child(1) {
		margin-top: 20rpx;
		width: 35%;
		height: 50rpx;
		line-height: 55rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
	}

	.correlationCase>view:nth-child(1)>image {
		width: 50rpx;
		height: 35rpx;
	}

	.case>view {
		width: 100%;
		// height: 200rpx;
		padding: 20rpx 0 20rpx 0;
		border-bottom: 1px solid #E5E5E5;
		// background-color: aqua;
	}

	.caseOne {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background-color: skyblue;
	}

	.caseOne>image {
		margin-left: 30rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.annexBig {
		width: 75%;
		height: 70%;
		// background-color: lightblue;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 26rpx;

		.biaoti {
			font-size: 14px;
			color: #333333;
			font-weight: 700;
			font-family: '微软雅黑 Bold', '微软雅黑';
		}

		.ownerSide {
			font-size: 26rpx;
			color: #999999;
		}

		.Servants {
			margin-left: 10rpx;
			font-size: 26rpx;
			color: #333333;
		}


	}

	.anli {
		font-size: 16px;
		font-weight: 800;
	}
</style>

<style lang="scss">
	.cidental {
		width: 176rpx;
		height: 176rpx;
		border-radius: 7px;
	}

	.casePhotos {
		margin-left: 30rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 7px;
	}
</style>